<template>
	<view class="login-container">
		<!-- 状态栏占位 -->
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>

		<!-- 顶部插画区域 -->
		<view class="header-section">
			<view class="illustration-circle">
				<image class="illustration-img" :src="public_img + '/img/loginlogo.png'" mode="aspectFit"></image>
			</view>
		</view>	

		<!-- 表单区域 -->
		<view class="form-section">
			<!-- 账号输入框 -->
			<view class="input-wrapper">
				<uni-icons type="person" size="22" color="#999"></uni-icons>
				<input class="input-field" type="digit" placeholder="请输入账号" placeholder-style="color: #999;"
					:value="username" @input="onUsernameInput" />
			</view>

			<!-- 密码输入框 -->
			<view class="input-wrapper">
				<uni-icons type="locked" size="22" color="#999"></uni-icons>
				<input class="input-field" type="digit" password placeholder="请输入密码" placeholder-style="color: #999;"
					:value="password" @input="onPasswordInput" />
			</view>

			<!-- 确认密码输入框（注册时显示） -->
			<view class="input-wrapper" v-if="isRegisterMode">
				<uni-icons type="locked" size="22" color="#999"></uni-icons>
				<input class="input-field" type="digit" password placeholder="请再次输入密码" placeholder-style="color: #999;"
					:value="confirmPassword" @input="onConfirmPasswordInput" />
			</view>

			<!-- 登录/注册按钮 -->
			<view class="login-btn" :class="{ 'register-btn': isRegisterMode }" @click="handleSubmit">
				<text class="login-btn-text">{{ isRegisterMode ? '注册' : '登录' }}</text>
			</view>

			<!-- 切换登录/注册链接 -->
			<view class="register-link" @click="toggleMode">
				<text>{{ isRegisterMode ? '已有账号?前往登录' : '没有账号?前往注册' }}</text>
			</view>
		</view>

		<!-- 其他登录方式（仅登录时显示） -->
		<view class="other-login-section" v-if="!isRegisterMode">
			<text class="other-login-text">其他登录方式</text>
			<view class="wechat-icon-wrapper" @click="wechatLogin">
				<image :src="public_img + '/img/wx.png'" mode="widthFix"></image>
			</view>
		</view>

		<!-- 版权信息 -->
		<view class="copyright">
			<text>@此版权为大喇叭编程实训基地所有</text>
		</view>
	</view>
</template>

<script>
import { login, register } from '../../api/login.js'
import { public_img } from '@/static/public.js'
export default {
	data() {
		return {
			username: '',
			password: '',
			confirmPassword: '', // 确认密码
			statusBarHeight: 0,
			isLoading: false, // 加载状态
			isRegisterMode: false, // 是否为注册模式
			public_img: public_img
		}
	},
	onLoad() {
		// 获取系统信息，计算状态栏高度
		this.getSystemInfo()
	},
	methods: {
		// 获取系统信息
		getSystemInfo() {
			try {
				const systemInfo = uni.getSystemInfoSync()
				// 获取状态栏高度
				this.statusBarHeight = systemInfo.statusBarHeight || 0
			} catch (e) {
				console.error('获取系统信息失败', e)
				// 默认状态栏高度
				this.statusBarHeight = 20
			}
		},
		// 账号输入过滤，只允许数字
		onUsernameInput(e) {
			const value = e.detail.value || ''
			// 只保留数字
			const numbers = value.replace(/[^\d]/g, '')
			// 更新值（无论是否包含非数字都要更新，因为用户可能在输入中）
			this.username = numbers
		},
		// 密码输入过滤，只允许数字
		onPasswordInput(e) {
			const value = e.detail.value || ''
			// 只保留数字
			const numbers = value.replace(/[^\d]/g, '')
			// 更新值（无论是否包含非数字都要更新，因为用户可能在输入中）
			this.password = numbers
		},
		// 确认密码输入过滤，只允许数字
		onConfirmPasswordInput(e) {
			const value = e.detail.value || ''
			// 只保留数字
			const numbers = value.replace(/[^\d]/g, '')
			// 更新值
			this.confirmPassword = numbers
		},
		// 切换登录/注册模式
		toggleMode() {
			this.isRegisterMode = !this.isRegisterMode
			// 清空表单
			this.username = ''
			this.password = ''
			this.confirmPassword = ''
		},
		// 手机号正则校验
		validatePhone(phone) {
			// 11位数字，以1开头
			const phoneReg = /^1[3-9]\d{9}$/
			return phoneReg.test(phone)
		},
		// 表单校验
		validateForm() {
			// 非空校验，确保值不为 undefined 或 null
			const username = (this.username || '').trim()
			if (!username) {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none',
					duration: 2000
				})
				return false
			}

			const password = (this.password || '').trim()
			if (!password) {
				uni.showToast({
					title: '请输入密码',
					icon: 'none',
					duration: 2000
				})
				return false
			}

			// 手机号格式校验
			if (!this.validatePhone(username)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none',
					duration: 2000
				})
				return false
			}

			// 注册模式需要校验确认密码
			if (this.isRegisterMode) {
				const confirmPassword = (this.confirmPassword || '').trim()
				if (!confirmPassword) {
					uni.showToast({
						title: '请再次输入密码',
						icon: 'none',
						duration: 2000
					})
					return false
				}

				// 两次密码一致校验
				if (password !== confirmPassword) {
					uni.showToast({
						title: '两次密码输入不一致',
						icon: 'none',
						duration: 2000
					})
					return false
				}
			}

			return true
		},
		// 提交处理（登录或注册）
		async handleSubmit() {
			// 表单校验
			if (!this.validateForm()) {
				return
			}

			// 防止重复提交
			if (this.isLoading) {
				return
			}

			if (this.isRegisterMode) {
				// 注册模式
				this.handleRegister()
			} else {
				// 登录模式
				this.handleLogin()
			}
		},
		// 注册处理
		async handleRegister() {
			// 显示加载提示
			this.isLoading = true
			uni.showLoading({
				title: '注册中...',
				mask: true
			})

			try {
				// 调用注册接口
				const userData = await register({
					username: this.username,
					password: this.password
				})

				// 注册成功
				uni.hideLoading()
				this.isLoading = false

				console.log('注册成功', userData)

				// 保存token和用户信息到本地存储
				if (userData.token) {
					uni.setStorageSync('token', userData.token)
				}
				if (userData.id) {
					uni.setStorageSync('uid', userData.id)
				}
				if (userData) {
					uni.setStorageSync('userInfo', userData)
				}

				// 显示注册成功提示
				uni.showToast({
					title: '注册成功',
					icon: 'success',
					duration: 1000
				})

				// 延迟后切换到登录模式
				setTimeout(() => {
					this.isRegisterMode = false
					this.confirmPassword = ''
					// TODO: 或者直接跳转到首页
					// uni.reLaunch({
					// 	url: '/pages/index/index'
					// })
				}, 1000)

			} catch (err) {
				// 注册失败
				uni.hideLoading()
				this.isLoading = false

				console.error('注册失败', err)

				// 显示错误信息，优先使用后端返回的msg
				let errorMsg = '注册失败，请稍后重试'
				if (err.msg) {
					errorMsg = err.msg
				} else if (err.data && err.data.msg) {
					errorMsg = err.data.msg
				} else if (err.errMsg) {
					errorMsg = err.errMsg
				}

				uni.showToast({
					title: errorMsg,
					icon: 'none',
					duration: 2000
				})
			}
		},
		// 登录处理
		async handleLogin() {
			// 显示加载提示
			this.isLoading = true
			uni.showLoading({
				title: '登录中...',
				mask: true
			})

			try {
				// 调用登录接口
				const userData = await login({
					username: this.username,
					password: this.password
				})

				// 登录成功
				uni.hideLoading()
				this.isLoading = false

				console.log('登录成功', userData)

				// 保存token和用户信息到本地存储
				if (userData.token) {
					uni.setStorageSync('token', userData.token)
				}
				if (userData.id) {
					uni.setStorageSync('uid', userData.id)
				}
				if (userData) {
					uni.setStorageSync('userInfo', userData)
				}
				if (userData.list) {
					uni.setStorageSync('listAll', userData.list)
				}

				// 显示登录成功提示
				uni.showToast({
					title: '登录成功',
					icon: 'success',
					duration: 1000
				})

				// 延迟跳转到首页，使用reLaunch清除页面栈，防止返回到登录页
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}, 1000)

			} catch (err) {
				// 登录失败	
				uni.hideLoading()
				this.isLoading = false

				console.error('登录失败', err)

				// 显示错误信息，优先使用后端返回的msg
				let errorMsg = '登录失败，请稍后重试'
				if (err.msg) {
					errorMsg = err.msg
				} else if (err.data && err.data.msg) {
					errorMsg = err.data.msg
				} else if (err.errMsg) {
					errorMsg = err.errMsg
				}

				uni.showToast({
					title: errorMsg,
					icon: 'none',
					duration: 2000
				})
			}
		},
		wechatLogin() {
			// 微信登录暂未开发
			uni.showToast({
				title: '正在开发中，敬请期待',
				icon: 'none',
				duration: 2000
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.login-container {
	min-height: 100vh;
	background-color: #f1f1f1;
	display: flex;
	flex-direction: column;
	padding: 40rpx 60rpx;
	box-sizing: border-box;
}

/* 状态栏占位 */
.status-bar {
	width: 100%;
	background-color: #f1f1f1;
}

/* 顶部插画区域 */
.header-section {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 60rpx;
	margin-bottom: 80rpx;
	position: relative;
}

.illustration-circle {
	width: 500rpx;
	height: 500rpx;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
}

.illustration-img {
	width: 100%;
	height: 100%;
}

/* 表单区域 */
.form-section {
	margin-bottom: 80rpx;
	padding: 0px 30rpx;
}

.input-wrapper {
	border-radius: 50rpx;
	padding: 15rpx 30rpx;
	margin-bottom: 30rpx;
	display: flex;
	align-items: center;
	border: 1px solid #c2c2c2;
}

.input-field {
	flex: 1;
	margin-left: 20rpx;
	font-size: 28rpx;
	color: #333;
	line-height: 1.5;
}

.login-btn {
	background-color: #ff8d1a;
	border-radius: 50rpx;
	padding: 14rpx;
	margin-top: 50rpx;
	text-align: center;
	transition: all 0.3s ease;
}

.login-btn:active {
	transform: scale(0.98);
	box-shadow: 0 4rpx 12rpx rgba(255, 140, 66, 0.3);
}

/* 注册按钮样式 */
.register-btn {
	background-color: #2a82e4;
}

.register-btn:active {
	box-shadow: 0 4rpx 12rpx rgba(42, 130, 228, 0.3);
}

.login-btn-text {
	color: #fff;
	font-size: 32rpx;
	font-weight: bold;
}

.register-link {
	text-align: center;
	margin-top: 10rpx;
	padding: 10rpx;

	text {
		font-size: 26rpx;
		color: #666;
	}
}

.register-link:active {
	opacity: 0.7;
}

/* 其他登录方式 */
.other-login-section {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 60rpx;
	gap: 20rpx;
	flex-wrap: wrap;
}

.other-login-text {
	font-size: 26rpx;
	color: #999;
}

.wechat-icon-wrapper {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.wechat-icon {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

/* 版权信息 */
.copyright {
	text-align: center;
	padding-top: 30rpx;

	text {
		font-size: 22rpx;
		color: #999;
	}
}
</style>